import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Card, Form, Input } from 'antd'
import React, { useEffect, useState } from 'react'
import './Login.scss'
function Com(props) {
  const [state, setState] = useState(0)

  useEffect(() => {
    console.log('函数组件来咯')
  }, [])

  return (
    <div className="content">
      <Card title="签个到后台管理系统" align="middle" justify="center" className="Card-box">
        <Form name="LoginForm" style={{ display: 'flex', flexDirection: 'column' }}>
          <Form.Item
            name="useName"
            rules={[
              {
                required: true,
                message: '请输入用户名'
              },
              {
                max: 10,
                message: '最大不能超过10字'
              }
            ]}>
            <Input value="123" type="text" prefix={<UserOutlined />} />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入密码'
              }
            ]}>
            <Input type="password" value="密码" prefix={<LockOutlined />} style={{ width: '100%' }}></Input>
          </Form.Item>
          <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
            登录
          </Button>
        </Form>
      </Card>
    </div>
  )
}

export default Com
